<template>
  <div>
    <el-button type="danger" :icon="Plus">去妊检</el-button>
  </div>
  <br />
  <hr style="font-size: 20px" />
  <br />

  <br />
  <h2 style="background-color:mistyrose;font-size: 15px;border: 1px solid red;">&emsp;已选择 {{ form1.num }} 项</h2>
  <el-table
    :data="tableData"
    height="400"
    border
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" />
    <el-table-column prop="sleepInforId" label="序号" >
      <template #default="{$index}">
         {{ $index+1 }}
      </template>
    </el-table-column>
    <el-table-column prop="earNumber" label="种母耳号" />
    <!-- <el-table-column prop="pregnancyDays" label="妊振天数">
      <template #default="scope"> {{ scope.row.pregnancyDays }}天 </template>
    </el-table-column> -->
    <el-table-column prop="cottageName" label="栋舍" />
    <el-table-column prop="fieIdName" label="栏位" />
    <el-table-column prop="zz" label="类型">
      <template #default="scope">
        <span>提示</span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script lang="ts" setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Plus,
} from '@element-plus/icons-vue';
import { reactive, ref, onMounted, computed } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
//调用持久化
import { useCounterStore } from '@/stores/counter';
const counterStore = useCounterStore();
const route = useRoute();
const router = useRouter();

//钩子函数
onMounted(() => {
  getTable(); //获取表格数据
});

const form = reactive({
  motherGivingBirthIds: [],
});
const form1=reactive({
  num:0
})
const multipleSelection = ref<any>([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
  form.motherGivingBirthIds = multipleSelection.value.map(
    (item: any) => item.motherGivingBirthId,
    console.log(val),
    form1.num=val.length
  );

  console.log(form.motherGivingBirthIds);
};

//计算属性
const totals = computed(() => {
  let totalNumber = 0;
  form.motherGivingBirthIds.forEach((item: any) => {
    totalNumber += 1;
  });
  return totalNumber;
});

//查询表数据
const tableData = ref([]); //获取数据
const getTable = () => {
  axios
    .get(
      'http://localhost:5039/api/Tips/SearchCheckTip'
    )
    .then((res) => {
      tableData.value = res.data.data;
    });
};
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
